<template>
	<el-dropdown class="item-gap" @command="onSelectDropdown">
		<el-button type="primary" size="mini">
			<div class="flex-between-center">
				<div style="width: 60px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
					<span> {{ searchParams.workshopIds.length ? workshopList.filter(x => searchParams.workshopIds.includes(x.id)).map(x => x.name).join(',') : '暂无区域' }}</span>
				</div>
				<i class="el-icon-arrow-down el-icon--right"></i>
			</div>
		</el-button>
		<el-dropdown-menu slot="dropdown" :append-to-body="false">
			<el-dropdown-item
				v-for="item in workshopList"
				:key="item.id"
				:label="item.name"
				:command="item.id"
				class="flex-start-center"
				style="white-space: nowrap;"
			>
				<div style="width: 20px;height: 100%;" :class="searchParams.workshopIds ? searchParams.workshopIds.includes(item.id) ? 'el-icon-check item-gap' : 'item-gap' : ''"></div>
				<div>{{ item.name }}</div>
			</el-dropdown-item>
		</el-dropdown-menu>
	</el-dropdown>
</template>

<script>
    export default {
        props: {
            searchParams: {
                type: Object,
                default() {
                    return {};
                }
            },
            workshopList: {
                type: Array,
                default() {
                    return [];
                }
            }
        },
        data() {
            return {

            };
        },
        methods: {
            onSelectDropdown(e) {
                this.$emit('on-change', e);
            }
        }
    };
</script>
